<template>
  <div
    class="floor"
    ref="floor"
    @mousemove.passive="volumeBtnFlag ? VolumeProgressMove($event) : false"
  >
    <div
      class="playbar"
      @mouseenter="showFlag ? showEnter() : false"
      @mouseleave="showFlag ? showLeave() : false"
      :class="bottom"
      ref="floorBox"
      @mousemove.passive="flagProgressBar ? moveProgressBar($event) : false"
    >
      <div class="floor-box"></div>
      <BaseFloorMain></BaseFloorMain>
      <FloorRightButton :show1="showbox"></FloorRightButton>
      <FloorSongList></FloorSongList>
    </div>
  </div>
</template>

<script>
//  底部右侧按钮
import FloorRightButton from "@/components/floorFuntionZone/FloorRightButton/index.vue";
//  底部主体区
import BaseFloorMain from "@/components/floorFuntionZone/FloorMain/BaseFloorMain.vue";
import FloorSongList from "@/components/floorFuntionZone/FloorSongList/FloorSongList.vue";
import FloorFramePlayFnShowMixin from "@/components/floorFuntionZone/FloorFramePlayFnShowMixin.js";
import FloorMouseupProgressBarStateMixin from "@/components/floorFuntionZone/FloorMouseupProgressBarStateMixin.js";
import FloorMousemoveProressBarStateMixin from "@/components/floorFuntionZone/FloorMousemoveProressBarStateMixin.js";
import { ref, onMounted, computed } from "vue";

import { useStore } from "vuex";
export default {
  name: "BaseFloorFrame",
  components: { FloorRightButton, BaseFloorMain, FloorSongList },
  setup() {
    //  当鼠标松开时,进度条以及音乐播放的时间是否需要更新。
    const floor = ref(null);
    const store = useStore();
    onMounted(() => {
      FloorMouseupProgressBarStateMixin(floor.value);
      store.commit("SongVolume/setFloorElement", floor.value);
    });
    //  鼠标移动控制进度条
    const MousemoveProressBarStateMixin = FloorMousemoveProressBarStateMixin();
    //  用来判断音量按钮是否处理按下时的状态,当处理按下时的状态则开启音量随着鼠标上下移动而改变。
    const volumeBtnFlag = computed(() => store.state.SongVolume.volumeBtnFlag);
    //  将移动的y轴传递给vuex
    function VolumeProgressMove(e) {
      store.commit("SongVolume/changeParsnet", e.clientY);
    }

    return {
      ...MousemoveProressBarStateMixin,
      floor,
      //  底部功能区隐藏与显示
      ...FloorFramePlayFnShowMixin(),
      VolumeProgressMove,
      volumeBtnFlag,
    };
  },
};
</script>

<style scoped lang="less">
.floor {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: -45px;
  height: 53px;
  z-index: 1002;
}
.playbar {
  position: absolute;
  top: -45px;
  width: 100%;
  height: 53px;
}

@keyframes down {
  from {
    top: -45px;
  }
  to {
    top: 0;
  }
}
@keyframes open {
  from {
    top: 0;
  }
  to {
    top: -45px;
  }
}
.open {
  animation-name: open;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
.shut-down {
  animation-name: down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.floor-box {
  margin-right: 67px;
  height: 53px;
  background: url("../../common/images/playbar.png") repeat-x 0 0;
}
</style>
